<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thmeleaf.org/thymeleaf-extras-shiro">

<head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <title>学生信息</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!-- themify icons CSS -->
    <link rel="stylesheet" th:href="@{/css/themify-icons.css}">
    <!-- Animations CSS -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!-- Main CSS -->
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" th:href="@{/css/green.css}" id="style_theme">
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
    <!-- morris charts -->
    <link rel="stylesheet" th:href="@{/charts/css/morris.css}">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/css/jquery-jvectormap.css}">
    <link rel="stylesheet" th:href="@{/datatable/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">

    <script th:src="@{/js/modernizr.min.js}"></script>
</head>

<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>


<div class="wrapper">
    <div id="content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="widget-area-2 lochana-box-shadow">
                        <h3 class="widget-title">全部学生信息 </h3>
                        <div class="table-responsive mb-3">
                            <table id="tableId" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th class="no-sort">
                                        <div class="custom-control custom-checkbox">
                                            <input class="custom-control-input" type="checkbox" id="select-all">
                                            <label class="custom-control-label" for="select-all"></label>
                                        </div>
                                    </th>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>身份证号码</th>
                                    <th>楼房号</th>
                                    <th>寝室号</th>
                                    <th>入学日期</th>
                                    <th>出生日期</th>
                                    <th>专业</th>
                                    <th>班级</th>
                                    <th>辅导员</th>
                                    <th>政治面貌</th>
                                    <th>家庭住址</th>
                                    <th>邮箱</th>
                                    <th>联系方式</th>
                                    <th>在校状态</th>
                                    <th>备注</th>

                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="students:${students}">
                                    <td>
                                        <div class="custom-control custom-checkbox">
                                            <input class="custom-control-input" type="checkbox" th:id="${students.id}"
                                                   name="id" th:value="${students.id}">
                                            <label class="custom-control-label" th:for="${students.id}"></label>
                                        </div>
                                    </td>
                                    <td th:text="${students.stuId}"></td>
                                    <td th:text="${students.stuName}"></td>
                                    <td th:text="${students.stuSex}"></td>
                                    <td th:text="${students.idCard}"></td>
                                    <td th:text="${students.houId}"></td>
                                    <td th:text="${students.dorId}"></td>
                                    <td th:text="${students.stuEnr}"></td>
                                    <td th:text="${students.stuBirth}"></td>
                                    <td th:text="${students.stuStudy}"></td>
                                    <td th:text="${students.stuClass}"></td>
                                    <td th:text="${students.stuCname}"></td>
                                    <td th:text="${students.stuPolit}"></td>
                                    <td th:text="${students.stuAdd}"></td>
                                    <td th:text="${students.email}"></td>
                                    <td th:text="${students.stuTel}"></td>
                                    <td th:text="${students.stuSta}" style="color: red"></td>
                                    <td th:text="${students.stuDes}"></td>

                                </tr>
                                </tbody>
                            </table>

                            <shiro:hasAnyPermissions name="高级管理员">
                                <button type="button" class="btn btn-primary mt-3 mb-0" onclick="openEditModal()"><span
                                        class="ti-pencil-alt"></span> 编辑
                                </button>
                            </shiro:hasAnyPermissions>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
    <span class="ti-angle-up"></span>
</a>

<!--修改模态框-->
<div class="modal fade" id="editModal" data-th-background="static" data-th-keytype="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--顶部标题-->
            <div class="modal-header">
                <!--标题-->
                <h5>编辑学生信息</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!--内容-->
            <div class="modal-body">
                <form id="formEditDoctor" action="/student/studentUpdate" method="post">
                    <input type="text" hidden id="id" name="id">
                    <div class="form-group col-md-6">
                        <label for="stuId">学号</label>
                        <input type="text" class="form-control" placeholder="stuId" id="stuId" name="stuId" readonly="readonly">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="stuName">姓名</label>
                        <input type="text" class="form-control" placeholder="stuName" id="stuName" name="stuName" readonly="readonly">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="idCard">身份证号码</label>
                        <input type="text" class="form-control" placeholder="idCard" id="idCard" name="idCard"
                               onchange="queryNum3()">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="houId">楼房号</label>
                        <select class="form-control" id="houId" name="houId">
                            <option id="select1"></option>
                            <option th:each="houses:${houses}" th:value="${houses.houId}"
                                    th:text="${houses.houId}"></option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dorId">寝室号</label>
                        <select class="form-control" id="dorId" name="dorId">
                            <option id="select2"></option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="stuStudy">专业</label>
                        <input type="text" class="form-control" placeholder="stuStudy" id="stuStudy" name="stuStudy">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="stuClass">班级</label>
                        <input type="text" class="form-control" placeholder="stuClass" id="stuClass" name="stuClass">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="stuCname">辅导员</label>
                        <input type="text" class="form-control" placeholder="stuCname" id="stuCname" name="stuCname">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="stuPolit">政治面貌</label>
                        <select class="form-control" id="stuPolit" name="stuPolit">
                            <option id="select3"></option>
                            <option>群众</option>
                            <option>团员</option>
                            <option>党员</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="stuAdd">家庭住址</label>
                        <input type="text" class="form-control" placeholder="stuAdd" id="stuAdd" name="stuAdd">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="email">邮箱</label>
                        <input type="text" class="form-control" placeholder="email" id="email" name="email" onchange="queryNum2()">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="stuTel">联系方式</label>
                        <input type="text" class="form-control" placeholder="stuTel" id="stuTel" name="stuTel" onchange="queryNum1()">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="stuSta">在校状态</label>
                        <select class="form-control" id="stuSta" name="stuSta">
                            <option id="select4"></option>
                            <option>永久离校</option>
                            <option>在校</option>
                            <option>短期离校</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="stuDes">备注</label>
                        <input type="text" class="form-control" placeholder="stuDes" id="stuDes" name="stuDes">
                    </div>
                    <div class="form-group col-md-6 mb-3">
                        <button type="submit" class="btn btn-primary btn-lg">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- /Back to Top -->
<!-- Jquery Library-->
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<!-- Popper Library-->
<script th:src="@{/js/popper.min.js}"></script>
<!-- Bootstrap Library-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Datatable  -->
<script th:src="@{/datatable/jquery.dataTables.min.js}"></script>
<script th:src="@{/datatable/dataTables.bootstrap4.min.js}"></script>
<!-- Custom Script-->
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/js/custom-datatables.js}"></script>


<script th:inline="javascript">

    /*打开修改模态框*/
    function openEditModal() {
        var id = "";
        $("input[name='id']:checked").each(function () {
            id = $(this).attr('value');
        });
        if (id == "") {
            alert("请选择要修改的数据")
        } else {
            /* $("#id").val(id);
             $("#editModal").modal('show');*/

            $.ajax({
                cache: true,
                type: "get",
                url: "/student/findOneStudent",
                data: {"id": id},
                success: function (data) {
                    console.log(data);
                    $("#stuId").val(data[0].stuId);
                    $("#stuName").val(data[0].stuName);
                    $("#idCard").val(data[0].idCard);
                    $("#houId").val(data[0].houId);
                    //给下拉列表的第一个下拉框赋值
                    document.getElementById("select1").text = data[0].houId;
                    $("#select1").val(data[0].houId);
                    document.getElementById("select1").selected = 'selected';
                    //给下拉列表的第一个下拉框赋值
                    document.getElementById("select2").text = data[0].dorId;
                    $("#select2").val(data[0].dorId);
                    document.getElementById("select2").selected = 'selected';
                    $("#stuStudy").val(data[0].stuStudy);
                    $("#stuClass").val(data[0].stuClass);
                    $("#stuCname").val(data[0].stuCname);
                    //给下拉列表的第一个下拉框赋值
                    document.getElementById("select3").text = data[0].stuPolit;
                    $("#select3").val(data[0].stuPolit);
                    document.getElementById("select3").selected = 'selected';
                    $("#stuAdd").val(data[0].stuAdd);
                    $("#email").val(data[0].email);
                    $("#stuTel").val(data[0].stuTel);
                    //给下拉列表的第一个下拉框赋值
                    document.getElementById("select4").text = data[0].stuSta;
                    $("#select4").val(data[0].stuSta);
                    document.getElementById("select4").selected = 'selected';
                    $("#stuDes").val(data[0].stuDes);

                    $("#id").val(id);
                    $("#editModal").modal('show');
                },
                error: function () {
                    notifyError("获取数据失败，请重新刷新！")
                }
            });


        }
    }

    //寝室楼联动寝室
    $("#houId").change(function () {
        var houId = $("#houId").val();
        if (houId == " " || houId == '选择宿舍楼') {
            return;
        }
        console.log("我是" + houId);
        $.ajax({
            cache: true,
            type: "get",
            url: "/dorm/findDormByHouId",
            data: {"houId": houId},
            success: function (data) {
                console.log(data);
                var dorId = $("#dorId").empty();
                for (var i = 0; i < data.length; i++) {
                    dorId.append("<option value ='" + data[i].dorId + "'>" + data[i].dorId + "</option>");
                }
            },
            error: function () {
                notifyError("获取数据失败，请重新刷新！")
            }
        })
    })

    /*判断是否电话号码 */
    function queryNum1() {
        var tel = document.getElementById('stuTel').value;
        var reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/; //校验手机号和固定电话
        var gu = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
        if (!reg.test(tel) || !gu.test(tel)) {
            alert("请输入正确的手机号");
            return false;
        }else {
            return true;
        }

    }

    /*邮箱验证*/
    function queryNum2() {
        var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
        var obj = document.getElementById("email"); //要验证的对象
        if (!reg.test(obj.value)) { //正则验证不通过，格式不对
            alert("邮箱格式不正确!");
            return false;
        } else {
            return true;
        }
    }

    /*身份证验证*/
    function queryNum3() {
        var idCard = document.getElementById('idCard').value;
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(idCard)){
            return true;
        }else {
            alert("身份证格式不正确")
            return false;
        }
    }

</script>


</body>
</html>